<template>
	<div class="add-node-btn-box">
		<div class="add-node-btn">
			<el-popover placement="right-start" v-model="visible">
				<div class="add-node-popover-body">
					<a class="add-node-popover-item approver" @click="addType(1)">
						<div class="item-wrapper">
							<span class="icon">
								<icon-svg name="flow-approval" />
							</span>
						</div>
						<p>审批人</p>
					</a>
					<a class="add-node-popover-item notifier" @click="addType(2)">
						<div class="item-wrapper">
							<span class="icon">
								<icon-svg name="flow-send" />
							</span>
						</div>
						<p>抄送人</p>
					</a>
					<a class="add-node-popover-item condition" @click="addType(4)">
						<div class="item-wrapper">
							<span class="icon">
								<icon-svg name="flow-organization" />
							</span>
						</div>
						<p>条件分支</p>
					</a>
				</div>
				<button class="btn" type="button" slot="reference">
					<span class="icon el-icon-plus" />
				</button>
			</el-popover>
		</div>
	</div>
</template>
<script>
export default {
	props: ["childNodeP"],
	data() {
		return {
			visible: false
		};
	},
	methods: {
		addType(type) {
			this.visible = false;
			if (type != 4) {
				var data;
				if (type == 1) {
					data = {
						nodeName: "审核人",
						error: true,
						type: 1,
						settype: 1,
						selectMode: 0,
						selectRange: 0,
						directorLevel: 1,
						examineMode: 1,
						noHanderAction: 1,
						examineEndDirectorLevel: 0,
						childNode: this.childNodeP,
						nodeUserList: [],
						nodeUser: [],
						operateType: [],
						isEdit: 0
					};
				} else if (type == 2) {
					data = {
						nodeName: "抄送人",
						type: 2,
						ccSelfSelectFlag: 0,
						childNode: this.childNodeP,
						nodeUserList: [],
						nodeUser: []
					};
				}
				this.$emit("update:childNodeP", data);
			} else {
				this.$emit("update:childNodeP", {
					nodeName: "添加条件",
					type: 4,
					childNode: null,
					conditionNodes: [
						{
							nodeName: "条件1",
							error: true,
							type: 3,
							priorityLevel: 1,
							conditionList: [],
							nodeUserList: [],
							childNode: this.childNodeP,
							nodeUser: []
						},
						{
							nodeName: "条件2",
							type: 3,
							priorityLevel: 2,
							conditionList: [],
							nodeUserList: [],
							childNode: null,
							nodeUser: []
						}
					]
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.add-node-popover {
	min-height: 160px;
}
.add-node-popover-header {
	position: relative;
	margin-bottom: 15px;
}
.add-node-popover-close {
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 5px;
	color: rgba(0, 0, 0, 0.25);
}

.add-node-popover-body {
	display: flex;
}

.add-node-popover-item {
	cursor: pointer;
	text-align: center;
	flex: 1;
	color: #191f25 !important;
	& + & {
		margin-left: 10px;
	}
	.item-wrapper {
		user-select: none;
		display: inline-block;
		width: 60px;
		height: 60px;
		margin-bottom: 5px;
		background: #fff;
		border: 1px solid #e2e2e2;
		border-radius: 50%;
		transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	}
	.icon {
		font-size: 30px;
		line-height: 60px;
	}
	&.approver .item-wrapper {
		color: #ff943e;
	}
	&.notifier .item-wrapper {
		color: #3296fa;
	}
	&.condition .item-wrapper {
		color: #15bc83;
	}
	&.auto .item-wrapper {
		color: $primary;
	}
	&:hover {
		.item-wrapper {
			background: $primary;
			box-shadow: 0 10px 20px 0 mix(#fff, $primary, 40%);
		}
		.icon {
			color: #fff;
		}
	}
	&:active {
		.item-wrapper {
			box-shadow: none;
			background: #eaeaea;
		}
		.icon {
			color: inherit;
		}
	}
}

// .add-node-popover-item .add-node-popover-item.condition .item-wrapper {
// 	color: #15bc83;
// }

.add-node-btn-box {
	width: 240px;
	display: inline-flex;
	flex-shrink: 0;
	position: relative;
	&:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
		margin: auto;
		width: 2px;
		height: 100%;
		background-color: #cacaca;
	}
}
.add-node-btn {
	user-select: none;
	width: 240px;
	padding: 20px 0 32px;
	display: flex;
	justify-content: center;
	flex-shrink: 0;
	flex-grow: 1;
	.btn {
		cursor: pointer;
		outline: none;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
		width: 30px;
		height: 30px;
		background: $primary;
		border-radius: 50%;
		position: relative;
		border: none;
		line-height: 30px;
		transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		.icon {
			color: #fff;
			font-size: 16px;
		}
		&:hover {
			transform: scale(1.3);
			box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
		}
		&:active {
			transform: none;
			background: $primary;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
		}
	}
}
</style>
